<template>
  <el-descriptions
    :title="title"
    :column="column"
    :direction="direction"
    :size="size"
    :border="border"
    :colon="colon"
  >
    <!-- Extra slot -->
    <template v-if="$slots.extra" #extra>
      <slot name="extra"></slot>
    </template>
    <!-- Default slot for description items -->
    <slot></slot>
  </el-descriptions>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  // 标题
  title: {
    type: String,
    default: '基本信息'
  },
  // 一行放置几个
  column: {
    type: Number,
    default: 3
  },
  // 排列的方向
  direction: {
    type: String,
    default: 'horizontal',
    validator: (value) => ['horizontal', 'vertical'].includes(value)
  },
  // 列表的尺寸
  size: {
    type: String,
    default: 'default',
    validator: (value) => ['large', 'default', 'small'].includes(value)
  },
  // 是否显示边框
  border: {
    type: Boolean,
    default: false
  },
  // 是否显示冒号
  colon: {
    type: Boolean,
    default: true
  }
})
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions__header {
  font-size: 14px;
  margin-bottom: 6px !important;
}

::v-deep .el-descriptions .el-descriptions-item__cell,
::v-deep .el-descriptions :not(.is-bordered) .el-descriptions-item__cell,
::v-deep .el-descriptions-item{
  padding-bottom: 6px !important;
}

::v-deep .el-descriptions-item__content{
  color: #333 !important;
}

// 添加 span 样式支持
::v-deep .el-descriptions-item__cell {
  &[colspan="2"] {
    grid-column: span 2;
  }
}
</style>
